<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {listBorrowingUsers} from '@/api/borrowingUser'
import {borrow, cReturn, getBorrowingRecordByContractId} from '@/api/borrowingRecord'
import {BorrowingRecordC} from '@/types/borrowingRecordC'
import {ElMessage} from 'element-plus'
import {SelectOption, SelectOptionC} from '@/types/global.d'

const selectOptions = ref<SelectOption[]>([])
const visible = ref(false)
const dataFormRef = ref()
const dataForm = ref<BorrowingRecord>(new BorrowingRecordC())

function init(id: number) {
  visible.value = true
  nextTick(async () => {
    dataFormRef.value.resetFields()
    const borrowingRecord = await getBorrowingRecordByContractId(id)
    if (borrowingRecord) {
      // 有没归还的借阅记录则归还
      dataForm.value = borrowingRecord
      // 归还人默认选中借阅人
      dataForm.value.returnPersonId = dataForm.value.borrowingPersonId
    } else {
      // 借阅
      dataForm.value = new BorrowingRecordC()
      dataForm.value.contractId = id
    }

    // 查出所有可以选择的借阅人，填充到 select options
    const borrowingUsers = await listBorrowingUsers()
    selectOptions.value = borrowingUsers.records.map(value => {
      const option = new SelectOptionC()
      option.label = value.borrowingName
      option.value = value.id
      return option
    })
  })
}
defineExpose({
  init,
})

const emits = defineEmits(['refreshDataList'])

// 表单提交
async function dataFormSubmit() {
  console.log('save borrowingRecord: ', dataForm.value)

  if (dataForm.value.id) {
    await cReturn(dataForm.value)
  } else {
    await borrow(dataForm.value)
  }

  visible.value = false
  emits('refreshDataList')
  ElMessage({
    type: 'success',
    message: '操作成功',
    duration: 1000,
  })
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="dataForm.id?'归还':'借阅'"
    :close-on-click-modal="false"
    width="500px"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"
      @keyup.enter="dataFormSubmit()"
    >
      <template v-if="dataForm.id">
        <!--存在借阅记录 id 则有借阅记录-->
        <el-form-item label="合同id" prop="contractId">
          <el-input
            v-model="dataForm.contractId"
            disabled
            placeholder="合同id"
          />
        </el-form-item>
        <el-form-item label="借阅人" prop="borrowingName">
          <el-input
            v-model="dataForm.borrowingName"
            disabled
            placeholder="借阅人"
          />
        </el-form-item>
        <el-form-item label="借阅时间" prop="borrowingTime">
          <el-input
            v-model="dataForm.borrowingTime"
            disabled
            placeholder="借阅时间"
          />
        </el-form-item>
      </template>

      <el-form-item v-if="dataForm.id" label="归还人" prop="returnPersonId">
        <el-select
          v-model="dataForm.returnPersonId"
          placeholder="请选择归还人"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-else label="借阅人" prop="borrowingPersonId">
        <el-select
          v-model="dataForm.borrowingPersonId"
          placeholder="请选择借阅人"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
